<template>
  <div class="detail-container">
    <!-- 标题 -->
    <h1 class="guide-title">{{ data.guide.title }}</h1>

    <!-- 发布信息 -->
    <div class="meta-info">
      <span class="author">
        <el-icon><User /></el-icon>
        <span>发布人：{{ data.guide.createdByUsername }}</span>
      </span>
      <span class="publish-time">
        <el-icon><Calendar /></el-icon>
        <span>发布时间：{{ data.guide.createdAt }}</span>
      </span>
    </div>

    <!-- 标签 -->
    <!-- 修正后的标签区域结构 -->
    <div class="tags-section" v-if="tagsArray.length > 0">
      <div class="tags-header">
        <h3 class="section-title">相关标签</h3>
        <div class="tags-container">
          <el-tag
              v-for="(tag, index) in tagsArray"
              :key="index"
              type="success"
              effect="dark"
              class="plant-tag"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>
    <!-- 图片 -->
    <div class="image-wrapper" v-if="data.guide.img">
      <el-image
          :src="data.guide.img"
          :preview-src-list="[data.guide.img]"
          fit="cover"
          class="guide-image"
      >
        <template #error>
          <div class="image-error">图片加载失败</div>
        </template>
      </el-image>
    </div>

    <!-- 内容 -->
    <div class="content-section">
      <div class="guide-content" v-html="data.guide.guideContent"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, computed } from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";
import { User, Calendar } from "@element-plus/icons-vue";

const data = reactive({
  id: router.currentRoute.value.query.id,
  guide: {},
});

const loadGuide = () => {
  request.get('/plantGuide/selectById/' + data.id).then(res => {
    if (res.code === '200') {
      data.guide = res.data;
      console.log('Guide:', data.guide); // 调试信息
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(error => {
    console.error("Failed to fetch guide details:", error);
    ElMessage.error("获取指南详情失败，请稍后再试");
  });
};

onMounted(() => {
  loadGuide();
});

// 解析 tags 字段
const tagsArray = computed(() => {
  const tags = data.guide.tags;
  if (typeof tags === 'string' && tags.trim() !== '') {
    try {
      return JSON.parse(tags);
    } catch (e) {
      console.error("Failed to parse tags:", e);
      return [];
    }
  }
  return [];
});
</script>

<style scoped>
/* 保持原有容器样式 */
.detail-container {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
}

.guide-title {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: #303133;
  margin-bottom: 20px;
}

.meta-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 关键修改：控制子元素间距 */
  color: #909399;
  font-size: 14px;
  margin-bottom: 40px;
}

/* 图片容器关键修改 */
.image-wrapper {
  margin: 30px 0;
  text-align: center;
}

/* 深度选择器穿透修改 */
.image-wrapper ::v-deep .el-image {
  display: inline-block !important;
  width: 400px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.image-wrapper ::v-deep .el-image__inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-wrapper ::v-deep .el-image:hover .el-image__inner {
  transform: scale(1.03);
}
/* 修正后的样式 */
.tags-section {
  margin: 20px 0;
}

.tags-header {
  display: flex;
  align-items: center;  /* 垂直居中 */
  gap: 15px;           /* 标题与标签间距 */
}

.section-title {
  margin: 0;          /* 移除默认 margin */
  font-size: 16px;
  color: #606266;
  white-space: nowrap; /* 防止标题换行 */
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;          /* 标签间距 */
}

.section-title {
  font-size: 18px;
  color: #606266;
}

.guide-content {
  line-height: 1.8;
  font-size: 16px;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-wrapper ::v-deep .el-image {
    width: 100% !important;
    height: 250px !important;
    max-width: 350px;
  }

  .guide-title {
    font-size: 24px;
  }
}
</style>
